body{/* 网页背景色 */
    background: #009FFF;  
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #ec2F4B, #009FFF); 
     /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #ec2F4B, #009FFF); 
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.cir1{/* 左半圆弧线 */
    width: 30px;
    height: 60px;
    display: block;
    position: absolute;
    top: 50px;
    left: 78px;
    /* background-color: aquamarine; */
    border: 7px solid rgb(3, 255, 78);
    border-radius: 100% 0 0 100%/50%;
    border-right: none;
    transform-origin: 30px 30px;
    animation: cir1 1s infinite linear;
}
@keyframes cir1{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}
.cir2{/* 弧线2 */
    position: absolute;
    top: 30px;
    left: 60px;
    width: 50px;
    height: 100px;
    /* background-color: yellowgreen; */
    border: 4px solid rgb(7, 238, 255);
    border-radius: 100% 0 0 100%/50%;
    border-right: none;
    transform-origin: 50px 50px;
    animation: cir2 1.2s infinite linear reverse;
}
@keyframes cir2{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}
#txt{
    font-size: 65px;
    position: absolute;
    top: -10px;
    left: 520px;
}
h2{
    position: absolute;
    top: 55px;
    left: 870px;
}
#btn1,#btn2{
    width: 50px;
    height: 30px;
    border: 2px solid black;
    position: absolute;
}
#btn1{
    top: 65px;
    right: 155px;
}
#btn2{
    top: 65px;
    right: 100px;
}
input{
    width: 200px;
    position: absolute;
    top: 70px;
    right: 305px;
    overflow: hidden;
}
svg,.search{
    position: absolute;
    top: 65px;
    right: 270px;
}
.icon1{/* 小火车头动画 */
    position: absolute;
    top: 450px;
    right: -75px;
    display: block;
    animation: icon1 4.5s infinite linear;
}
@keyframes icon1{
    0% {right: 0px;}
    25% {right: 400px;}
    50% {right: 850px;}
    75% {right: 1250px;}
    100% {right: 1550px;}
}
#box1,#box2,#box3,#box4,#box5{
    width: 300px;
    height: 70px;
    float: left;
    position: relative;
    top: 150px;
    background-color: aliceblue;
    margin-right: 6.6px;
    text-align: center;
    line-height: 70px;
    font-size: 30px;
    font-weight: 600;
    color:#106868;
}
/* box背景渐变色设置 */
#box1{
    background: #C6FFDD;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #f7797d, #FBD786, #C6FFDD);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #f7797d, #FBD786, #C6FFDD); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
#box2{
    background: #00c3ff;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #ffff1c, #00c3ff);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #ffff1c, #00c3ff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
#box3{
    background: #40E0D0;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #FF0080, #FF8C00, #40E0D0);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #FF0080, #FF8C00, #40E0D0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
#box4{
    background: #77A1D3;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #E684AE, #79CBCA, #77A1D3);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #E684AE, #79CBCA, #77A1D3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
#box5{
    background: #1a2a6c;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #fdbb2d, #b21f1f, #1a2a6c);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #fdbb2d, #d372e3, #b1bdef); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
#card1,#card2,#card3,#card4,#card5{
    width: 280px;
    height: 230px;
    position: absolute;
    top: 70px;
    left: 10px;
    background-color: aqua;
    background:linear-gradient(to bottom,rgba(231, 135, 9, 0.7),rgba(110, 98, 98, 0.9)); 
    border-radius: 20px;
    display: none;
    font-size: 20px;
    text-align: center;
    overflow: auto;
    animation: cards  2s;
}
@keyframes cards{
    0%{top:55px}
    50%{top:90px}
    100%{top: 70px;}
}
a{
    display: block;
    text-decoration-line: none;
    border: 0.5px solid rgb(250, 17, 17);
    color: #40E0D0;
}